<template>
  <footer class="settlement">
    <div
      class="mask"
      v-if="isShow && cartList.length"
      @click="isShow = false"
    ></div>
    <div class="container">
      <div class="cart" @click="showCartList">
        <i class="iconfont icon-gouwuchekong"></i>
      </div>
      <div class="content clearfix" v-if="shopDetail" @click="showCartList">
        <div class="price left">
          共计¥{{ totalPrice }} (配送费¥{{ shopDetail.delivery_fee }})
        </div>
        <button class="btn right" @click.stop="confirm">
          {{ orderPrice }}
        </button>
      </div>
      <div class="cart_list" v-if="isShow && cartList.length">
        <header>
          <div class="left">
            <span>选择的商品</span>&nbsp;
            <span class="packing">(打包费{{ packingFee }})</span>
          </div>
          <div class="right" @click="clearCart">
            <i class="iconfont icon-shanchu"></i>
            清空购物车
          </div>
        </header>
        <ul>
          <li v-for="(item, index) in cartList" :key="index">
            <img :src="imageUrl + item.food_img" alt="" />
            <div class="haofan">
              <p class="name">{{ item.name }}</p>
              <p class="spces">{{ item.select }}</p>
              <p class="price">￥{{ item.price }}</p>
            </div>
            <add-cart class="btn" :foods="item" />
          </li>
        </ul>
      </div>
    </div>
  </footer>
</template>

<script>
import { imageUrl } from '@/config/env';
import AddCart from './AddCart';

import { mapState, mapMutations } from 'vuex';
import { Local } from '@/common/storage';

export default {
  props: {
    cartList: {
      type: Array,
      default: function() {
        return [];
      }
    },
    totalPrice: Number
  },
  data() {
    return {
      imageUrl,
      isShow: false
    };
  },
  components: {
    AddCart
  },
  computed: {
    ...mapState(['shopDetail', 'shop_id', 'lat', 'lng', 'userInfo']),
    // 结算
    orderPrice() {
      if (this.totalPrice === 0) {
        return '¥' + this.shopDetail.min_order_amount + '起送';
      } else if (this.totalPrice < this.shopDetail.min_order_amount) {
        return (
          '差' + (this.shopDetail.min_order_amount - this.totalPrice) + '元起送'
        );
      } else {
        return '结算';
      }
    },
    // 包装费
    packingFee() {
      if (this.cartList.length) {
        let num = 0;
        this.cartList.forEach(item => {
          num += item.pack_fee;
        });
        return num;
      }
      return 0;
    }
  },
  methods: {
    ...mapMutations(['CLEAR_CART']),
    // 显示隐藏购物车列表
    showCartList() {
      if (this.cartList.length) {
        this.isShow = !this.isShow;
      }
    },
    // 清空购物车
    clearCart() {
      this.CLEAR_CART(this.shop_id);
    },
    // 结算
    confirm() {
      if (!(this.userInfo && this.userInfo.id)) {
        this.$confirm({ title: '请你先登录' }).then(res => {
          if (res === 'confirm') {
            this.$router.push('/login');
          }
        });
        return false;
      }

      if (this.totalPrice > this.shopDetail.min_order_amount) {
        Local.set('confirmOrder', this.cartList);
        this.$router.push({
          path: '/confirmOrder',
          query: {
            shopId: this.shop_id,
            lat: this.lat,
            lng: this.lng
          }
        });
      }
    }
  },
  watch: {
    cartList(value) {
      if (!value.length) {
        this.isShow = false;
      }
    }
  }
};
</script>

<style lang="less" scoped>
.settlement {
  .mask {
    z-index: 80;
  }
}

.container {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 45px;
  z-index: 90;
  background-color: #999;
  .cart {
    position: absolute;
    top: -20px;
    left: 13px;
    width: 50px;
    height: 50px;
    line-height: 50px;
    z-index: 102;
    text-align: center;
    border-radius: 50%;
    background-color: var(--color-base);
    i {
      font-size: 28px;
      color: #fff;
    }
  }
  .content {
    line-height: 45px;
    .price {
      margin-left: 70px;
      font-size: var(--font-size);
      color: #222;
    }
    .btn {
      width: 100px;
      line-height: 45px;
      background-color: var(--color-base);
    }
  }
}
.cart_list {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 45px;
  height: 300px;
  background-color: #fff;
  header {
    height: 30px;
    line-height: 30px;
    padding: 0 10px;
    font-size: var(--font-min);
    border-bottom: 1px solid #eee;
    i {
      font-size: 12px;
    }
    .packing {
      color: red;
    }
  }
  ul {
    padding: 10px;
    width: 100%;
    height: 270px;
    overflow: hidden;
    overflow: scroll;
    li {
      position: relative;
      display: flex;
      margin-bottom: 10px;
      img {
        width: 50px;
        height: 50px;
        border-radius: 6px;
        margin-right: 10px;
      }
      .haofan {
        display: flex;
        flex-direction: column;
        justify-content: space-around;
      }
      .name {
        font-size: var(--font-size);
      }
      .spces,
      .price {
        font-size: var(--font-min);
      }
      .price {
        color: red;
      }
    }
    .btn {
      position: absolute;
      right: 5px;
      bottom: 0;
    }
  }
}
</style>
